<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_head(title)">
    <!-- start: Meta -->
    <meta charset="utf-8">
    <title th:text="${title}">首页</title>
    <meta name="description" content="Bootstrap Metro Dashboard">
    <meta name="author" content="">
    <meta name="keyword" content="">
    <!-- end: Meta -->

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- end: Mobile Specific -->

    <!-- start: CSS -->
    <link id="bootstrap-style" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap-responsive.min.css}" rel="stylesheet">
    <link th:href="@{/css/common.css}" rel="stylesheet">
    <link id="base-style" th:href="@{/css/style.css}" rel="stylesheet">
    <!-- 主页钟表css -->
    <link rel="stylesheet" th:href="@{/css/clock.css}" media="screen" type="text/css" />
    <!--<link id="base-style-responsive" th:href="@{css/style-responsive.css}" rel="stylesheet">-->
   <!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext'
          rel='stylesheet' type='text/css'>-->
    <!-- end: CSS -->
    <!--字体使用-->
    <!--<link href="https://fonts.font.im/css?family=Monoton" rel="stylesheet">-->

    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <link id="ie-style" href="../static/css/ie.css" rel="stylesheet">
    <![endif]-->
    <!--字体添加-->
    <!--<link href="https://fonts.font.im/css?family=Monoton" rel="stylesheet">-->
    <!--[if IE 9]>
    <link id="ie9style" href="../static/css/ie9.css" rel="stylesheet">
    <![endif]-->

    <!-- start: Favicon -->
    <link rel="shortcut icon" th:href="@{img/favicon.ico}">
    <!-- end: Favicon -->
    <style>
        <!-- 修改菜单栏离开后显示白色的问题-->
        #lidevice.html:hover{
            background: black;
        }
        #lidevice.html{
            background: transparent;
        }
        .open #lidevice.html{background: transparent;}

        #deviceManage:hover{
            background: black;
        }
        #deviceManage{
            background: transparent;
        }
        .open #deviceManage{background: transparent;}


        /*#lichart5:hover{*/
            /*background: black;*/
        /*}*/
        /*#lichart5{*/
            /*background: transparent;*/
        /*}*/
        /*.open #lichart5{background: #578ebe;}*/


        #method:hover{
            background: black;
        }
        #method{
            background: transparent;
        }
        .open #method{background: transparent;}

        .breadcrumb {
            height: 100%;
            margin: -20px -20px 20px -20px;
            line-height: 34px;
            background: #F7F7F7;
            border: 0px;
            color: #888;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            border-radius: 0px;
        }
        body{
            background: #1C2B36;
        }
        .row-fluid [class*="span"]{
            margin-left: 0px;
        }

        #title{
            font-family: "Microsoft YaHei", "Microsoft Sans Serif", "Microsoft SanSerf", 微软雅黑;
            font-size:25px;
            font-weight: 800;
        }

        #content{
            width: 85.47%;
        }
        .neon-wrap {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        .neon-wrap span {
            display: block;
        }
        .neon-text {
            font-family: 'Monoton', cursive;
            font-size: 100px;
            animation: neon 4s infinite;
        }
        .neon-by {
            color: #404040;
            text-shadow: -3px 0px 5px #404040, 0px 0px 2px #404040;
        }
        @keyframes neon {
            0%, 30%, 32%, 34% {
                color: #222;
                text-shadow: -3px 0px 5px #222, 0px 0px 2px #222;
            }
            31%, 33%, 35%, 100% {
                color: #404040;
                text-shadow: -3px 0px 5px #404040, 0px 0px 2px #404040;
            }
        }
    </style>

</head>

<body>
<!-- start: Header -->
<div class="navbar" th:fragment="header">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse"
               data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <a class="brand" th:href="@{/new.html}"><span id="title"><i class="icon-building"></i>&nbsp;安捷大厦能源路由器建模平台</span></a>


            <!-- start: Header Menu -->
            <div class="nav-no-collapse header-nav">
                <ul class="nav pull-right">
                    <!-- start: User Dropdown -->
                    <li class="dropdown">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="halflings-icon white user"></i>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-menu-title">
                                <span>账号设置</span>
                            </li>
                            <li><a href="#"><i class="halflings-icon user"></i> 用户信息</a></li>
                            <li><a th:href="@{/manager/loginOut}"><i class="halflings-icon off"></i> 退出</a></li>
                        </ul>
                    </li>
                    <!-- end: User Dropdown -->
                </ul>
            </div>
            <!-- end: Header Menu -->

        </div>
    </div>
</div>
<!-- start: Header -->


<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Settings</h3>
    </div>
    <div class="modal-body">
        <p>Here settings can be configured...</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

<div class="clearfix"></div>

<div class="container-fluid-full">
    <div class="row-fluid">

        <!-- start: Main Menu -->
        <div id="sidebar-left" class="span2" th:fragment="sidebar_left" style="heigth:100%">
            <div class="nav-collapse sidebar-nav">
                <ul class="nav nav-tabs nav-stacked main-menu" >

                    <li >
                        <a class="dropmenu" id="deviceManage" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> 设备管理</span></a>
                        <ul>
                            <li ><a id="lidevice.html" class="submenu" th:href="@{/device/getAll}"><i class="icon-file-alt"></i><span
                                    class="hidden-tablet">设备展示</span></a>
                            </li>
                        </ul>
                    </li>
                    <li><a  id="liele" th:href="@{/property/electricityPrice}"><i class="icon-star"></i><span class="hidden-tablet"> 电价</span></a></li>
                    <li><a  id="lichart1" th:href="@{/chart1.html}"><i class="icon-search"></i><span class="hidden-tablet"> 知识图谱</span></a></li>
                    <li><a  id="lichart3" th:href="@{/energyType/viewEnergyType}"><i class="icon-bookmark"></i><span class="hidden-tablet"> 能源属性</span></a></li>
                    <li><a  id="lichart4" th:href="@{/graphInfo/viewGraphInfo}"><i class="icon-file-alt"></i><span class="hidden-tablet"> 图谱管理</span></a></li>
                    <li><a  id="lichart5" th:href="@{/relationship/viewRelationship}"><i class="icon-file-alt"></i><span class="hidden-tablet"> 策略库管理</span></a></li>
                    <li><a  id="lichart6" th:href="@{/relationship/viewDragPage}"><i class="icon-move"></i><span class="hidden-tablet"> 拖拽图谱</span></a></li>
                </ul>
            </div>
        </div>
        <!-- end: Main Menu -->

        <noscript>
            <div class="alert alert-block span10">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
            </div>
        </noscript>

        <!-- start: Content -->
        <div id="content" class="span10">


            <ul class="breadcrumb">
                <li>
                    <i class="icon-home"></i>
                    <a th:href="@{/new.html}">主页</a>
                    <i class="icon-angle-right"></i>
                </li>
            </ul>
            <!--标题开始-->
            <div class="neon-wrap">
                <span class="neon-text">安捷大厦</span>
            </div>
            <!--标题结束-->
            

            <!--主页钟表开始-->
            <div id="clock">
                <div id="h10" class="num">
                    <div class="upper"></div>
                    <div class="base upper"></div>
                    <div class="base lower"></div>
                    <div class="lower"></div>
                </div>

                <div id="h0" class="num">
                    <div class="upper"></div>
                    <div class="base upper"></div>
                    <div class="base lower"></div>
                    <div class="lower"></div>
                </div>

                <div class="colon">:</div>

                <div id="m10" class="num">
                    <div class="upper"></div>
                    <div class="base upper"></div>
                    <div class="base lower"></div>
                    <div class="lower"></div>
                </div>

                <div id="m0" class="num">
                    <div class="upper"></div>
                    <div class="base upper"></div>
                    <div class="base lower"></div>
                    <div class="lower"></div>
                </div>

                <div class="colon">:</div>

                <div id="s10" class="num">
                    <div class="upper"></div>
                    <div class="base upper"></div>
                    <div class="base lower"></div>
                    <div class="lower"></div>
                </div>

                <div id="s0" class="num">
                    <div class="upper"></div>
                    <div class="base upper"></div>
                    <div class="base lower"></div>
                    <div class="lower"></div>
                </div>
            </div>
              <!--主页钟表结束-->


        </div><!--/.fluid-container-->

        <!-- end: Content -->
    </div><!--/#content.span10-->
</div><!--/fluid-row-->


<!-- start: JavaScript-->
<div th:fragment="common_js">
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/jquery-migrate-1.0.0.min.js}"></script>

    <script th:src="@{/js/jquery-ui-1.10.0.custom.min.js}"></script>

    <script th:src="@{/js/jquery.ui.touch-punch.js}"></script>

    <script th:src="@{/js/modernizr.js}"></script>

    <script th:src="@{/js/bootstrap.js}"></script>

    <script th:src="@{/js/jquery.cookie.js}"></script>

    <script th:src='@{/js/fullcalendar.min.js}'></script>

    <script th:src='@{/js/jquery.dataTables.min.js}'></script>

    <script th:src="@{/js/excanvas.js}"></script>
    <script th:src="@{/js/jquery.flot.js}"></script>
    <script th:src="@{/js/jquery.flot.pie.js}"></script>
    <script th:src="@{/js/jquery.flot.stack.js}"></script>
    <script th:src="@{/js/jquery.flot.resize.min.js}"></script>

    <script th:src="@{/js/jquery.chosen.min.js}"></script>

    <script th:src="@{/js/jquery.uniform.min.js}"></script>

    <script th:src="@{/js/jquery.cleditor.min.js}"></script>

    <script th:src="@{/js/jquery.noty.js}"></script>

    <script th:src="@{/js/jquery.elfinder.min.js}"></script>

    <script th:src="@{/js/jquery.raty.min.js}"></script>

    <script th:src="@{/js/jquery.iphone.toggle.js}"></script>

    <script th:src="@{/js/jquery.uploadify-3.1.min.js}"></script>

    <script th:src="@{/js/jquery.gritter.min.js}"></script>

    <script th:src="@{/js/jquery.imagesloaded.js}"></script>

    <script th:src="@{/js/jquery.masonry.min.js}"></script>

    <script th:src="@{/js/jquery.knob.modified.js}"></script>

    <script th:src="@{/js/jquery.sparkline.min.js}"></script>

    <script th:src="@{/js/counter.js}"></script>

    <script th:src="@{/js/retina.js}"></script>

    <script th:src="@{/js/custom.js}"></script>
    <script th:src="@{/js/TweenMax.min.js}"></script>
    <script th:src="@{/js/device.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/js/mxClient.js}"></script>

    <!--  钟表JS-->
    <script type="text/javascript">
        // set 3d transforms
        TweenMax.set("#clock", {perspective:1500})
        TweenMax.set(".upper", {rotationX:0.01, transformOrigin:"50% 100%"})
        TweenMax.set(".lower", {rotationX:0.01, transformOrigin:"50% 0%"})

        // set clock
        var t, ss, mm, hh;
        setTimeVars();
        function setTimeVars(){
            t = new Date();
            t = new Date();
            ss = String(t.getSeconds());
            mm = String(t.getMinutes());
            hh = String( (t.getHours()>12) ? t.getHours()-12 : t.getHours() );
            if (ss.length==1) ss = "0"+ss;
            if (mm.length==1) mm = "0"+mm;
            if (hh.length==1) hh = "0"+hh;
        }

        h10.childNodes[3].innerHTML = h10.childNodes[7].innerHTML = "<span>"+Number(hh.substr(0,1))+"</span>";
        h0.childNodes[3].innerHTML = h0.childNodes[7].innerHTML = "<span>"+Number(String(hh).substr(1,1))+"</span>";

        m10.childNodes[3].innerHTML = m10.childNodes[7].innerHTML = "<span>"+Number(mm.substr(0,1))+"</span>";
        m0.childNodes[3].innerHTML = m0.childNodes[7].innerHTML = "<span>"+Number(mm.substr(1,1))+"</span>";

        s10.childNodes[3].innerHTML = s10.childNodes[7].innerHTML = "<span>"+Number(ss.substr(0,1))+"</span>";
        s0.childNodes[3].innerHTML = s0.childNodes[7].innerHTML = "<span>"+Number(ss.substr(1,1))+"</span>";


        // start ticking
        var interval = setInterval(function(){
            setTimeVars();

            tick(s0, Number(ss.substr(1,1)) )

            if (ss.substr(1,1)=="9"){
                tick(s10, Number(ss.substr(0,1)) )
                if (ss=="59"){
                    tick(s10, 5, true)
                    tick(m0, Number(mm.substr(1,1)))
                    if (mm.substr(1,1)=="9"){
                        tick(m10, Number(mm.substr(0,1)))
                        if (mm=="59") {
                            tick(m10, 5, true)
                            tick(h0, Number(hh.substr(1,1)))
                            if (hh.substr(1,1)=="9") tick(h10, Number(hh.substr(0,1)))
                            if (hh=="12") {
                                tick(h0, Number(hh.substr(0,1)), true)
                                tick(h10, Number(hh.substr(1,1)), true)
                            }
                        }
                    }
                }
            }

        }, 1000)

        function tick(mc,i,toZero=false){
            // set numbers
            mc.childNodes[3].innerHTML = "<span>"+i+"</span>"; //start upper
            mc.childNodes[5].innerHTML = "<span>"+i+"</span>"; //start lower
            if ( i==9 || toZero ) i=-1;
            mc.childNodes[1].innerHTML = "<span>"+(i+1)+"</span>"; //end upper
            mc.childNodes[7].innerHTML = "<span>"+(i+1)+"</span>"; //end lower
            // animate tick
            TweenMax.fromTo(mc.childNodes[1], .3, {alpha:0},{alpha:1, ease:Power4.easeIn})
            TweenMax.fromTo(mc.childNodes[3], .3, {rotationX:0, background:"linear-gradient(0deg, rgba(200,200,200,1), rgba(255,255,255,1) 15%)"},{rotationX:-90, ease:Power1.easeIn})
            TweenMax.fromTo(mc.childNodes[7], .5+.2*Math.random(), {rotationX:90},{rotationX:0, ease:Bounce.easeOut, delay:.3})
            TweenMax.fromTo(mc.childNodes[5], .6, {alpha:1},{alpha:0, ease:Bounce.easeOut, delay:.3})
        }
    </script>
</div>
<!-- end: JavaScript-->
<script>
    //获取当前点击的设备菜单，添加高亮显示
    $(document).ready(function (){
        var location=window.location.href;
        var name=location.substring(location.lastIndexOf('/'));
        if((name!="/")&&(name!="/new.html")) {
            $("#" + "li" + name).addClass("active");
        }
    })
</script>
</body>
</html>

